<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VIP</title>
    <meta name="description" content="这是一个 user 页面">
    <meta name="keywords" content="user">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
        .fade-enter,
        .fade-leave-to{
            opacity: 0;
            transform: translateX(180px);
        }
        /*v-enter-active【入场动画的时间段】*/
        /*v-leave-active【离场动画的时间段】*/
        .fade-enter-active,
        .fade-leave-active{
            transition:all 1s ease;
        }
    </style>
</head>
<body>
<div class="waic progress" id="app">
    <div class="yixif" :style="{'padding-left': paddingcss,'padding-right': paddingcss}">
<!--        <transition name="fade" mode="out-in">-->
            <span class="yixiaof" :style="{'left':csshongxian}">已消费{{haspay}}元</span><br/>
<!--        </transition>-->
<!--        <transition name="fade" mode="out-in">-->
            <img src="images/position.png" class="dingwei" :style="{'left':csshongxian}">
<!--        </transition>-->
    </div>
    <div class="xianpa" :style="{'padding-left': paddingcss,'padding-right': paddingcss}">
        <div class="hengxian">
            <div class="hongxian" :style="{'width':csshongxian}"></div>
        </div>
    </div>
    <div class="flexbox djwai">
        <div class="yifen dengji" :class="{gray:classx < index}" v-for="(item,index) in nodes">
            <img src="images/juyuandian.png">
            <div class="jucol">{{item.name}}</div>
            <div>满{{item.money}}元</div>
        </div>
    </div>
</div>
</body>
</html>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            nodes:[
                {name:"普通",money:0},
                {name:"银卡",money:100},
                {name:"金卡",money:500},
                {name:"白金卡",money:800},
                {name:"黄金卡",money:1000}
            ],
            haspay:600,
            classx:0,
            csshongxian:undefined,
            paddingcss:undefined
        },
        mounted() {
            this.setPosition()
            console.log(this.classx)
        },
        updated(){
         //   this.setPosition()
         //   console.log(this.classx)
        },
        computed: {

        },
        methods: {

            // i+1 已到nodes尾部
            /*设置进度条当前位置*/
            setPosition(){
                this.classx=0
                this.csshongxian="0px"
                this.paddingcss="0px"
                for(i = 0;i < this.nodes.length;i++){
                    let hengxian = document.getElementsByClassName("xianpa")
                    let hengwidth = hengxian[0].offsetWidth //获取总进度条的长度(横线)
                    let danwidth = hengwidth/(this.nodes.length) //单个块的长度
                    this.paddingcss = danwidth/2+"px"
                    if(this.haspay < this.nodes[i].money){//橘红分隔
                        console.log(hengwidth)
                        console.log(danwidth)
                        let hongwidth = danwidth * i - (danwidth/(this.nodes[i].money-this.nodes[i-1].money) * ( this.nodes[i].money - this.haspay))
                        this.csshongxian = hongwidth+"px"
                        this.classx --
                        break //第一次就跳出停止了
                    }else if(this.haspay === this.nodes[i].money){
                        console.log(hengwidth)
                        console.log(danwidth)
                        let hongwidth = danwidth * i
                        this.csshongxian = hongwidth+"px"
                        break //第一次就跳出停止了
                    }
                    this.classx ++ //橘红个数
                    console.log("这是第"+i+"个"+this.classx)
                }
            }
        }
    })



</script>
